<template>
  <div class="card-box plate">
    <el-card ref="card1" class="elcard" style="flex: 1; align-self: normal">
      <div slot="header" class="hd clearfix">
        <span class="tit">全国投资分布图</span>
      </div>
      <el-row type="flex">
        <el-col :span="10">
          <div id="ransferMap" style="width: 100%; height: 600px"></div>
        </el-col>
        <el-col :span="14">
          <div v-if="superList.length && superList.length > 0">
            <ul class="ul">
              <li v-for="(item, index) in superList" :key="index">
                <div>
                  <div>
                    <h2 class="name">{{ item.companyName }}</h2>
                    <span>
                      <!-- <el-tooltip
                        class="item"
                        effect="dark"
                        :content="!item.isOpponent ? '添加对比' : '取消对比'"
                        placement="top"
                      >
                        <a
                          class="iconfont icon-jia"
                          :class="{ active: item.isOpponent }"
                          @click="add(item, index, '1')"
                        ></a>
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="!item.isCollect ? '收藏' : '取消收藏'"
                        placement="top"
                      >
                        <a
                          class="el-icon-star-off"
                          :class="{ active: item.isCollect }"
                          @click="collet(item, index, '1')"
                        ></a>
                      </el-tooltip> -->
                    </span>
                  </div>
                  <ul>
                    <li>
                      <span>法人代表 ：</span>
                      <a>{{ item.operName }}</a>
                    </li>
                    <li>
                      <span>注册资金 ：</span>
                      <a>{{ item.regist }}</a>
                    </li>
                    <li>
                      <span>成立时间 ：</span>
                      <a>{{ item.startDate }}</a>
                    </li>
                  </ul>
                  <ul>
                    <li class="EntireLine">
                      <span>通讯地址 ：</span>
                      <a>{{ item.address ? item.address : "" }}</a>
                    </li>
                  </ul>
                  <ul>
                    <li class="EntireLine">
                      <span>科研星级 ：</span>
                      <a>
                        <i
                          :style="{ color: item.color }"
                          v-for="(item, index) in setStar(item.score)"
                          :key="index"
                          :class="item.value"
                        ></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
            <el-pagination
              background
              style="margin: 20px auto"
              @current-change="handleChangeSuper"
              layout="prev, pager, next"
              :current-page.sync="ipi"
              :page-size="ips"
              :total="total"
            >
            </el-pagination>
          </div>
          <div v-else>
            <div style="margin: 230px auto">暂无数据</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import cityMap from "@/utils/mock/MapJs/china-main-city-map";
import resize from "@/utils/resize";
export default {
  data() {
    return {
      companyName: this.$route.query.name || "",
      chart: null,
      mapName: "",
      data: [],
      dataCopy: [],
      org: 0,
      superList: [],
      mapData: [],
      total: 0,
      ipi: 1,
      ips: 3,
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById("ransferMap"));
    this.chart.on("click", this.mapClick);
    this.init();
  },
  methods: {
    mapClick(val) {
      if (val.data) {
        this.ipi = 1;
        let code = val.data.code;
        let mapData = this.mapData;
        if (this.mapName == val.data.name) {
          this.org = 0;
          this.listSplice(this.data);
          this.mapData.forEach((e, index) => {
            this.$set(mapData[index], "value", "100");
          });
        } else {
          this.org = 1;
          this.dataCopy = [];
          this.data.forEach((i) => {
            // 收集点击省的所有公司
            if (i.code === code) {
              this.dataCopy.push(i);
            }
          });
          this.listSplice(this.dataCopy);
          // 把地图变颜色
          this.mapData.forEach((e, index) => {
            if (e.name == val.data.name) {
              this.$set(mapData[index], "value", "80");
            } else {
              this.$set(mapData[index], "value", "100");
            }
          });
        }
        this.getChart(mapData);
        this.mapName = val.data.name; // 记录一下
      }
    },
    // 翻页
    handleChangeSuper(val) {
      this.ipi = val;
      if (this.org === 0) {
        this.listSplice(this.data);
      } else {
        this.listSplice(this.dataCopy);
      }
    },
    listSplice(data) {
      this.total = data.length;
      this.superList = data.slice(
        (this.ipi - 1) * this.ips,
        this.ipi * this.ips
      );
      this.superList.forEach((i, index) => {
        if (i.eid) this.getAddress(i.eid, this.superList[index]);
        if (i.companyName) {
          this.opponentFn(i.companyName, this.superList[index]);
          this.isCollectFn(i.companyName, this.superList[index]);
        }
      });
    },
    setStar(data) {
      var arr = [];
      for (var i = 1; i < 4; i++) {
        let color = "";
        if (data < 34) {
          if (i === 1) {
            color = "#504aac";
          } else {
            color = "#aeadad";
          }
        } else if (data < 67 && data > 33) {
          if (i < 3) {
            color = "#504aac";
          } else {
            color = "#aeadad";
          }
        } else {
          color = "orange";
        }
        arr.push({
          index: i,
          value: "el-icon-star-on",
          color: color,
        });
      }
      return arr;
    },
    init() {
      this.$post(this.$Url.company.branch, {
        companyName: this.companyName,
      })
        .then((res) => {
          // console.log(res)
          if (res.data) {
            let data = res.data;
            data.forEach((i) => {
              if (i.eid) {
                this.data.push(i);
              }
            });
            if (data.length && data.length > 0) {
              this.total = data.length;
              this.listSplice(this.data);
              let codeArr = [];
              let mapData = [];
              this.data.forEach((i) => {
                if (i.code) codeArr.push(i.code);
              });
              codeArr = [...new Set(codeArr)];
              codeArr.forEach((e) => {
                for (let i in cityMap) {
                  if (e == cityMap[i]) {
                    mapData.push({ name: i, value: 100, code: e });
                  }
                }
              });
              this.mapData = mapData;
              this.getChart(mapData);
            } else {
              this.getChart([]);
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    add(item, index, n) {
      let that = this;
      function fn(n, index, item) {
        if (n == 1) {
          that.$set(that.superList[index], "isOpponent", !item.isOpponent);
        } else {
          that.$set(that.patentList[index], "isOpponent", !item.isOpponent);
        }
      }
      if (item.isOpponent) {
        this.$delete(`${this.$Url.company.opponenDelete}/${item.eid}`, {})
          .then((res) => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "取消成功",
              });
              fn(n, index, item);
            } else {
              this.$message({
                type: "error",
                message: "取消失败",
                duration: 1000,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      } else {
        this.$post(this.$Url.company.opponentAdd, {
          companyId: item.eid,
          companyName: item.companyName,
        })
          .then((res) => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "添加成功",
                duration: 1000,
              });
              fn(n, index, item);
            } else {
              this.$message({
                type: "error",
                message: "添加失败",
                duration: 1000,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
    collet(item, index, n) {
      let that = this;
      function fn(n, index, item) {
        if (n == 1) {
          that.$set(that.superList[index], "isCollect", !item.isCollect);
        } else {
          that.$set(that.patentList[index], "isCollect", !item.isCollect);
        }
      }
      if (item.isCollect) {
        // 取消收藏
        this.$delete(`${this.$Url.company.collectDelete}/${item.eid}`, {})
          .then((res) => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "取消收藏成功",
              });

              fn(n, index, item);
            } else {
              this.$message({
                type: "error",
                message: "取消收藏失败",
                duration: 1000,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      } else {
        this.$post(this.$Url.company.collectAdd, {
          companyId: item.eid,
          companyName: item.companyName,
        })
          .then((res) => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "收藏成功",
                duration: 1000,
              });
              fn(n, index, item);
            } else {
              this.$message({
                type: "error",
                message: "收藏失败",
                duration: 1000,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
    // 是否加入对比
    opponentFn(name, sth) {
      this.$get(`${this.$Url.company.isOpponent}`, {
        companyName:name
      })
        .then((res) => {
          // console.log(res)
          this.$set(sth, "isOpponent", res.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 是否加入收藏
    isCollectFn(name, sth) {
      this.$get(`${this.$Url.company.isCollect}`, {
        companyName:name
      })
        .then((res) => {
          // console.log(res)
          this.$set(sth, "isCollect", res.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 地址
    getAddress(eid, sth) {
      // /company/address?eid=
      this.$get(`${this.$Url.company.address}`, {
        eid:eid
      })
        .then((res) => {
          if (res.data) {
            let address = res.data[0].address || "none";
            this.$set(sth, "address", address);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // color:'$mainColor'
    getChart(mapData) {
      const province = require("@/utils/mock/map/json/china.json");
      this.$echarts.registerMap("china", province);
      this.registerAndsetOption(mapData);
    },
    registerAndsetOption(mapData) {
      let option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: function (val) {
            /* let str =''
                        if(val.data){
                            str = val.name + val.data.value
                        }else{
                            str = val.name
                        } */
            return val.name;
          },
        },
        legend: {
          orient: "vertical",
          show: false,
          top: "bottom",
          left: "right",
          // data:['迁入','迁出'],
          textStyle: {
            color: "#fff",
          },
          selectedMode: "single",
        },
        visualMap: {
          show: false,
          min: 0,
          max: 200,
          left: "10%",
          top: "bottom",
          // showLabel: !0,
          pieces: [
            {
              gt: 99,
              label: "",
              color: "#d6d8ff",
            },
            {
              gte: 10,
              lte: 90,
              label: "",
              color: "#514bab",
            },
          ],
          // show: true
        },
        geo: {
          map: "china",
          label: {
            normal: {
              show: false,
              fontSize: "14",
              color: "#fff",
            },
            emphasis: {
              show: false,
            },
          },
          zoom: 1,
          roam: false,
          itemStyle: {
            normal: {
              color: "#fff",
              areaColor: "#eceff4",
              borderColor: "#fff",
              borderWidth: "2",
            },
            emphasis: {
              areaColor: "#d6d8ff", // 悬停板块的颜色
            },
          },
        },
        series: [
          {
            name: "",
            type: "map",
            geoIndex: 0,
            data: mapData,
            /* label:{
                            color:'#fff',
                            show:true
                        },
                        itemStyle:{
                            color:"#fff"
                        } */
          },
        ],
      };
      this.chart.setOption(option, true);
    },
  },
};
</script>
<style lang="scss" scoped>
.card-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  flex: 0.5;
  padding: 0 !important;
  text-align: left !important;
  ::v-deep {
    .el-card__header {
      position: relative;
      &:before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 5px;
        height: 30px;
        margin-top: -15px;
        content: "";
        background-color: $color101;
      }
    }
  }
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
  .achievements {
    position: relative;
    li {
      display: block;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 10px;
    }
  }
}
.plate {
  background: #fff;
}
h3 {
  text-align: left;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  padding-left: 20px;
}
.ul {
  overflow: hidden;
  > li {
    padding: 20px 0 20px 0;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    > div {
      width: 100%;
      padding-left: 20px;
      float: left;
      > div {
        width: 100%;
        text-align: left;
        overflow: hidden;
        padding-bottom: 10px;
        h2,
        span {
          display: block;
          float: left;
        }
        h2 {
          font-weight: bold;
          line-height: 30px;
          color: #000;
        }
        > span {
          width: 20%;
          float: right;
          a {
            display: block;
            float: left;
            font-size: 16px;
            line-height: 30px;
            margin-left: 20px;
            color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            background: #909399;
            cursor: pointer;
          }
          .active {
            background: orange;
          }
        }
      }
      > ul {
        width: 100%;
        overflow: hidden;
        > li {
          padding-right: 20px;
          line-height: 30px;
          float: left;
          text-align: left;
          width: 33%;
          box-sizing: border-box;
          > span,
          a {
            display: inline-block;
          }
          span {
            color: #8d8cab;
          }
          a {
            color: #5b5c61;
          }
        }
        .EntireLine {
          width: 100%;
        }
      }
    }
  }
}
</style>